<template>
  <div class="gantt_chart_module">
    <section class="setting-item vertical" @click="navigateToBigScreen">
      <i class="iconfont icon-charts-bar" />
      <span>图表</span>
    </section>
    <!-- <charts-display v-if="isChartsDisplayShow" @onChartsClose="onChartsClose" /> -->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import ChartsDisplay from './ChartsDisplay.vue'
@Component({
  components: {
    ChartsDisplay
  }
})
class GanttChart extends Vue {
  isChartsDisplayShow: boolean = false
  navigateToBigScreen() {
    this.$router.push({ path: '/dashboard/bigScreen' })
  }
  onChartsClose() {
    this.isChartsDisplayShow = false
  }
}
export default GanttChart
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.gantt_chart_module {
  box-sizing: border-box;
  padding-top: 5px;
  transition: all 0.5s ease;
  #flex(row, center, flex-start);
  .setting-item {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 3px;
    font-size: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    #text-color(--primary-text-color);
    i {
      font-size: 20px;
    }
    span {
      white-space: nowrap;
    }
    /deep/.el-select {
      position: absolute;
      left: 0;
      top: 0;
      width: 30px !important;
      .el-select__tags {
        display: none;
      }
      .el-input {
        visibility: hidden;
      }
    }
    .setting-button {
      margin-right: 5px;
      #flex(column, center, space-betwwen);
    }
  }
  .vertical {
    flex-direction: column;
  }
  .collapse {
    width: 32px;
    overflow: hidden;
  }
  .setting-item:hover {
    #bg-color(--primary-hover-text-color);
  }
}
</style>
